<template>
	<view class="filterWrapper">
		<view class="filterItem">
			<text>
				仓库编号
			</text>
			<input type="text" placeholder="点击输入仓库编号" v-model="StoreCode" />
			<button class="cu-btn stop text-white" @tap="clearFilter(0)">清空</button>
			<!-- <text>
				仓库编号
			</text>
			<input type="text" placeholder="仓库编号" v-model="StoreCode" /> -->
		</view>
		<view class="filterItem">
			<text>
				仓库名称
			</text>
			<input type="text" placeholder="点击输入仓库" v-model="StoreName" />
			<button class="cu-btn stop text-white" @tap="clearFilter(1)">清空</button>
			<!-- 	<text>
				仓库名称
			</text>
			<input type="text" placeholder="仓库名称" v-model="StoreName" /> -->
		</view>
		<view class="filterItem">
			<text>
				所属部门
			</text>
			<input type="text" placeholder="点击选择部门" @tap="showModel" disabled :value="BranchName" />
			<button class="cu-btn stop text-white" @tap="clearFilter(2)">清空</button>
		</view>
		<view class="cu-modal" :class="StoreModal ?'show':'hide'">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">部门</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white">
					<view class="searchStore">
						<input placeholder="请输入部门" placeholder-style="text-align: left; font-size: 14px;" v-model="SearchName" @input="filter" />
						<button @tap="searchStore">搜索</button>
					</view>
					<view class="StoreListWrap">
						<view v-for="(item,index) in TempEList" :key="index" @tap="selectScanGood(index)">{{item.BranchName}}</view>
					</view>
				</view>
			</view>
		</view>
		<QSpicker title="请选择日期时间" mode="bottom" type="date" ref="QS_Picekr_date" pickerId="date_1" :dataSet="dateSet"
		 showReset :autoHide="false" contentColor="#33cc33" :lineHeight=".05" @hideQSPicker="hideQSPicker($event)"
		 @showQSPicker="showQSPicker($event)" @confirm="confirm($event)" />
	</view>
</template>

<script>
	import QSpicker from '@/components/QuShe-picker/QuShe-picker.vue'
	import xflSelect from '../../components/xfl-select/xfl-select.vue'
	import * as Api from '@/syApis/syBb/apis.js'
	import * as Apis from '@/syApis/syDa/syDa.js'
	export default {
		components: {
			QSpicker,
			xflSelect
		},
		data() {
			return {
				dateSet: {
					dateMode: 3,
					dateFormatArray: ['-', '-', ' ', ':', ':']

				},
				startAndEndTime: 0,
				startTime: 0,
				endTime: 0,
				dateName: "",
				StoreID: "",
				GoodsName: "",
				list: [
					"总部", "分部"
				],
				DepartmentList: [],
				storeList: [],
				StoreName: "",
				StoreCode: "",
				BranchName: "",
				StoreModal: false,
				SearchName: "",
				TempEList: [],

			};
		},
		created() {
			let date = new Date();
			this.startTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			this.endTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
			this.Get_DepartmentMessage();
		},
		methods: {
			clearFilter(type){
				if(type==0){
					this.StoreCode = "";
				}else if(type==1){
					this.StoreName = "";
					this.StoreID = "";
				}else{
					this.BranchName = "";
				}
			},
			selectScanGood(index) {
				this.BranchName = this.TempEList[index].BranchName;
				// this.DpID = this.TempEList[index].DepartmentID;
				// this.DepartmentName = this.TempEList[index].DepartmentName;
				this.hideModal();
			},
			filter(e) {
				// console.log(e);
				let tempList = [];
				// console.log(this.DepartmentList);
				this.DepartmentList.forEach((item, index) => {
					if (item.BranchName.indexOf(e.detail.value) > -1) {
						tempList.push(item);
					}
				});
				if (tempList.length == 0) {
					Api.showTip("查无数据");
				}
				this.TempEList = tempList;
			},
			showModel() {
				this.StoreModal = true;
				this.SearchName = "";
				let data = {
					detail: {
						value: this.SearchName
					}
				}
				this.filter(data);
			},
			hideModal() {
				this.StoreModal = false;
				
			},
			//获取员工部门档案
			Get_DepartmentMessage() {
				let data = {};
				var _this = this;
				Apis.Get_BranchMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == '获取登录信息失败') {

						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
						} else {
							// _this.Dlist = [];
							_this.DepartmentList = res.data.ResultMsg;
							_this.TempEList = res.data.ResultMsg;
							// for (let item in res.data.ResultMsg) {
							// 	// //console.tablele(res.data.ResultMsg)
							// 	_this.Dlist.push(res.data.ResultMsg[item].DepartmentName);
							// }
						}
					} else {
						Api.ShowTip("服务器开小差了");
					}
				})
			},
			//获取仓库
			GetStoreMessage() {
				let data = {};
				var _this = this;
				Api.GetStoreMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == '获取登录信息失败') {

						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
						} else {
							_this.list = [];
							_this.storeList = res.data.ResultMsg;
							for (let item in res.data.ResultMsg) {
								_this.list.push(res.data.ResultMsg[item].StoreName);
							}
						}
					} else {
						Api.ShowTip("服务器开小差了");
					}
				})
			},
			//切换表格风格
			onNavigationBarButtonTap(e) {
				const index = e.index;
				console.log(index);
				if (index == 0) {
					this.changeDate();
				}
			},
			custormInput() {
				console.log(this);
			},
			//修改数据
			changeDate() {
				var pages = getCurrentPages(),
					prevPage = null;
				if (pages.length > 1) {
					prevPage = pages[pages.length - 2];
				}
				var that = this;
				var filter = "";
				if (this.StoreName != "") {
					filter += "StoreName like '%" + this.StoreName + "%'";
				}
				if (this.StoreCode != "") {
					if (filter == "") {
						filter += "StoreCode like '%" + this.StoreCode + "%'";
					} else {
						filter += " and StoreCode like '%" + this.StoreCode + "%'";
					}
				}
				if (this.BranchName != "") {
					if (filter == "") {
						filter += "BranchName='" + this.BranchName + "'";
					} else {
						filter += " and BranchName='" + this.BranchName + "'";
					}
				}
				let data = {
					StoreName: this.StoreName,
					StoreCode: this.StoreCode,
					BranchName: this.BranchName,
					Filter: filter
				};
				this.$eventHub.$emit('fires', data);
				uni.navigateBack({
					delta: 1
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeShow(name, type) {
				this.startAndEndTime = type;
				this.$refs[name].show();
				this.dateName = name;
			},
			showQSPicker(res) {
				console.log(res);
			},
			hideQSPicker(res) {

			},
			confirm(res) {
				if (this.startAndEndTime == 0) {
					this.startTime = res.data;
				} else {
					this.endTime = res.data;
				}
				this.$refs[this.dateName].hide();
			},
			getSelectValue(res) {
				this.BrachName = res.newVal;
				// for (let item in this.storeList) {
				// 	if (item == res.index) {
				// 		this.StoreID = this.storeList[item].BranchID;
				// 	}
				// }
			}
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/static/bbCss/bbFilter.scss'
	// button::after {
	// 	border: none;
	// 	padding: 0px;
	// }

	// page {
	// 	width: 100%;
	// 	height: 100%;
	// 	background: #ebebeb;
	// }

	// .filterWrapper {
	// 	background: #FFF;
	// 	padding-bottom: 15upx;
	// }

	// .title-padding {
	// 	height: var(--status-bar-height);
	// 	background: #031ae6;
	// 	box-sizing: content-box;
	// }

	// .filterHeader {
	// 	width: 100%;
	// 	height: 50px;
	// 	line-height: 50px;
	// 	position: relative;
	// 	text-align: center;
	// 	background: #031ae6;
	// 	color: #FFF;
	// 	font-size: 18px;
	// 	background-size: 100%;

	// 	.pd {
	// 		display: inline-block;
	// 		position: absolute;
	// 		margin-left: 10px;
	// 		top: 30upx;
	// 		left: 0px;
	// 		font-size: 14px;
	// 		width: 40upx;
	// 		height: 40upx;
	// 		background: url(../../static/back.png) no-repeat;
	// 		background-size: 100%;
	// 	}

	// 	.options {
	// 		position: absolute;
	// 		right: 0px;
	// 		top: 10px;
	// 		width: 80px;
	// 		display: flex;
	// 		text-align: right;

	// 		.setting {
	// 			width: 30px;
	// 			height: 30px;
	// 			background: url(../../static/sureFilter.png) no-repeat;
	// 			background-size: 30px;
	// 			border: none;
	// 			margin-left: 90upx;

	// 		}
	// 	}

	// }

	// .filterItem {
	// 	height: 120upx;
	// 	line-height: 120upx;
	// 	background: #FFF;
	// 	display: flex;
	// 	flex-direction: row;
	// 	box-sizing: border-box;
	// 	padding-left: 30upx;
	// 	padding-right: 30upx;
	// 	font-size: 32upx;
	// 	background: #FFF;

	// 	text {
	// 		flex: 1;

	// 		&:last-child {
	// 			text-align: right;
	// 		}
	// 	}

	// 	input {
	// 		flex: 1;
	// 		height: 60upx;
	// 		line-height: 60upx;
	// 		margin-top: 50upx;
	// 		border-bottom: 1px solid #ebebeb;
	// 	}

	// 	view.selectInput {
	// 		flex: 1;
	// 		height: 60upx;
	// 		line-height: 60upx;
	// 		margin-top: 22upx;
	// 		border-bottom: 1px solid #ebebeb;

	// 		input {
	// 			flex: 1;
	// 			height: 40upx;
	// 			line-height: 40upx;
	// 			margin-top: 50upx;
	// 			border-bottom: 1px solid #ebebeb;
	// 		}
	// 	}
	// }
</style>
